<template>
  <u-popup v-model="isVisible" :round="true" mode="center" borderRadius="24" @close="hide" >
    <view class="pop-main">
      <view class="pop-title">{{title}}</view>
      <slot>
        <view class="pop-content" :style="'text-align: ' + position">
          <text>{{ content }}</text>
        </view>
      </slot>
      <view class="pop-footer is-confirm" v-if="isConfirm">
        <button class="cancel-btn" @tap="hide">{{ cancelBtnTxt }}</button>
        <view class="btn-split"></view>
        <button class="ok-btn" @tap="okEv">{{ btnTxt }}</button>
      </view>
      <view class="pop-footer" v-else>
        <button class="ok-btn" @tap="hide">{{ btnTxt }}</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isConfirm: false,
      btnTxt: '',
      cancelBtnTxt: '',
      content: '',
      position: 'center',
      isVisible: false,
      title:''
    };
  },
  created() {
      this.show();
  },
  methods: {
    show() {
      const { title ='温馨提示',content = '', cancelBtnTxt ='', btnTxt = '好的', position = 'center', isConfirm = false } = this.config;
      this.setData({
        content,
        btnTxt,
        position,
        isVisible: true,
        isConfirm,
        cancelBtnTxt,
        title
      });
    },

    hide() {
      this.setData({
        isVisible: false,
      });
      this.$emit('hideEv')
      this.$emit('input', false)
    },
    okEv() {
      this.$emit('okEv');
      this.setData({
        isVisible: false,
      });
    }
  },
};
</script>
<style lang="scss" scoped>

.pop-main {
    background-color: #fff;
    width: 88vw;
    min-height: 40vw;
    padding: 60rpx 42rpx;
    border-radius: 36rpx;
}
.pop-title {
    font-size: 40rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50rpx;
}
.pop-content {
    font-size: 34rpx;
}
.pop-footer {
    padding-left: 0;
    padding-right: 0;
    margin-top: 60rpx;
}
.pop-footer .ok-btn {
    background: #F65352;
    color: #fff;
    border-radius: 40rpx;
    padding: 0rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    font-weight: bold;
    flex: 1;
}
.pop-footer.is-confirm {
    display: flex;
    justify-content: space-between;
}
.pop-footer.is-confirm .btn-split {
    width: 58rpx;
    height: 30rpx;
}
.pop-footer.is-confirm .cancel-btn{
    color: #FFFFFF;
    background-color: #CCCCCC;
    flex: 1;
    border-radius: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    font-weight: bold;
    padding: 0;
}
</style>
